<script setup>
import FormItem from './formItem.vue'
import { ref,reactive,computed } from 'vue'
const form = ref()
const props = defineProps({
  config:{
    type:Object,
    default: () => ({})
  },
    formData: {
      type: Array,
      default: () => []
    },
    formRules:{
      type: Object,
      default: () => ({})
    }
});
const formValue = reactive({})
const setFormValue = ()=>{
    console.log(props.formData,'props.formData')
    if(props.formData.length == 0 ) return;
    props.formData.forEach(item=>{
      formValue[item.prop] = ''
    })
}
setFormValue()
const Save = ()=>{
    console.log(formValue,'formValue')
}
const resetFields = ()=>{
  form.value.resetFields()
}

// 计算属性确定组件的属性
const componentProps = computed(() => {
    const baseProps = {
      inline:false,
      labelWidth:200,
      validateOnRuleChange:true,
      scrollToError:true,
      ...props.config
    };
  
    return baseProps;
  });

defineExpose({
  formValue,
  resetFields,
  Save,
})
</script>

<template>
  <el-form :model="formValue" 
  :rules="formRules" 
  ref="form"  
  v-bind="componentProps"
  >
      <template v-for="item in formData">
         <FormItem :options="item" v-model:data="formValue[item.prop]"/>
      </template>
    </el-form>
</template>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>
